<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Yy</title>
    <style>
        .picture_list img {
            width: 320px;
            height: 160px;
        }
        
        .picture_big img {
            width: 640px;
            height: 320px;
        }
        
        .picture_big {
            position: absolute;
        }
    </style>
</head>

<body>
    // 2. 实现鼠标悬浮图片，显示大图并随鼠标移动的功能。
    <div class="picture_list">
        <img src="./images/a.jpg" alt="">
        <img src="./images/b.jpg" alt="">
        <img src="./images/c.jpg" alt="">
    </div>
    <div class="picture_big"></div>
    <script>
        // 2. 实现鼠标悬浮图片，显示大图并随鼠标移动的功能。
        let imgList = document.querySelectorAll(".picture_list img");
        let bigPic = document.querySelector(".picture_big")
        let picContainer = document.querySelector(".picture_list")
        for (let i in imgList) {
            imgList[i].onmouseenter = function() {
                let img = `
                    <img src='${this.src}'>
                `
                bigPic.innerHTML = img;
            }
            imgList[i].onmouseleave = function() {
                bigPic.innerHTML = "";
            }
        }
        picContainer.onmousemove = function(e) {
            let x = e.clientX;
            let y = e.clientY;
            bigPic.style.top = y + 10 + "px";
            bigPic.style.left = x + 10 + "px";
        }
    </script>
</body>

</html>